<template>
  <div class="details">
    <!-- 返回导航条 -->
    <div class="navbar">
      <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-for="item in result" :key="item.id">
        <van-swipe-item><img :src="item.url" alt=""></van-swipe-item>
        <van-swipe-item><img :src="item.url2" alt=""></van-swipe-item>
        <van-swipe-item><img :src="item.url3" alt=""></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 价格 -->
    <div class="mijia">
      <div class="mijia_price">
        <div class="mijia_price_left">￥{{result1.price}}</div>
        <div class="mijia_price_right">
          <van-icon :name="icoflag ? 'star' : 'star-o'" @click="changeico" />
          <div style="font-size: 14px">收藏</div>
        </div>
      </div>
      <div class="mijia_name">
        {{ result1.dsec}}
      </div>
      <div
        class="mijia_describe"
       
      >
        <div class="mijia_describe_content">
          {{result1.dsec}}
        </div>
      </div>
    </div>
    <!-- 选择规格数量 -->
    <div class="prod_num">
      <van-cell title="请选择规格数量" @click="show_sku = true" is-link />
    </div>
    <div>
      <van-sku
        v-model="show_sku"
        :sku="sku"
        :goods="goods"
        :goods-id="info.id"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      />
    </div>

    <div class="prod_add">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="$router.push({ path: '/Itsmine' })"
        />
        <van-goods-action-button type="warning" text="加入购物车"  @click="show_sku = true"/>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>

    <div class="bottom_box"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {getDetailsDate} from "@/api"
export default {
  props:["id"],
   async created(){
    console.log(this.id);
    const {data} =await getDetailsDate({id:this.id})
    this.result=data.result
    this.result1=data.result[0]
    console.log(this.result);
    this.goods.picture=this.result1.url3
    this.sku.price=data.result[0].price

  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      Toast("按钮");
    },
    changeico() {
      this.icoflag = !this.icoflag;
    },
    onClickLeft() {
      this.$router.back();
    },
    onBuyClicked() {
      Toast("二期项目,让你们老板赶紧筹款!");
    },
    onAddCartClicked(skuData) {
      console.log(skuData);
      const oCart = {
        id: this.result1.id,
        number: skuData.selectedNum,
        name: this.result1.dsec,
        url: this.result1.url,
        price: this.result1.price,
      };
      const oCartList = JSON.parse(localStorage.getItem("cart") || "[]");
      let isAdd = false;
      oCartList.forEach((item, index) => {
        if (item.id == oCart.id) {
          isAdd = true;
          item.number = Number(oCart.number) + Number(item.number);
        }
      });

      if (isAdd == false) {
        oCartList.push(oCart);
      }
      //现在数据,覆盖本地的数据
      localStorage.setItem("cart", JSON.stringify(oCartList));

      Toast("加入购物车成功!");
      this.show_sku = false;
    },
  },
  data() {
    return {
      result:[],
      result1:[],
      quotaUsed:0,
      show_sku: false,
      sku: {
        tree: [],
        price: "1.00",
        stock_num: 227,
        hide_stock: false,
        
      },
      goods: {
        picture:"",
      },
      icoflag: false,
      info: [
        {
          price: "449",
          name: "小米降噪蓝牙耳机",
          describe: [
            {
              content: "2.5D琉光玻璃工艺，滑控自如，项链式防丢设计；",
            },
            {
              content: "创新六麦三角矩阵降噪系统，高保真透澈听感；",
            },
            {
              content: "20小时长续航，声画同步，隐藏双接口充电；",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.details {
  width: 100%;
  height:100%;
  overflow-y: auto;
  .navbar {
    height: 46px;
    width: 100%;
  }
  .van-nav-bar {
    background-color: rgba(255, 255, 255, 0);
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    img{
      width: 100%;
    }
  }
  .my-swipe {
    height: 414px;
  }
  .mijia {
    .mijia_price {
      display: flex;
      justify-content: space-between;
      color: rgb(153, 98, 26);
      font-size: 29px;
      font-weight: 500;
      margin: 20px;
      .mijia_price_right {
        width: 50px;
        text-align: center;
        .van-icon {
          color: orange;
        }
      }
    }
    .mijia_name {
      color: rgb(51, 51, 51);
      font-size: 18px;
      font-weight: 600;
      line-height: 28px;
      margin-left: 30px;
    }
    .mijia_describe {
      margin-top: 3.33333px;
      padding-right: 13.3333px;
      padding-left: 13.3333px;
      padding-top: 6.66667px;
      .mijia_describe_content {
        color: rgba(0, 0, 0, 0.8);
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        padding-left: 2px;
        margin-bottom: 2.33333px;
      }
    }
    .prod_add {
      z-index: 99999 !important;
    }
  }
  .bottom_box {
      height: 200px;
    }
}
</style>
